<template>
	<view class="FundRecord">
		<view class="NavigationBox">
			<view class="NavigationItem" :class="{currentColor:current==index}" v-for="(item,index) in navItem" @click="selectItem(index)">{{item.name}}</view>
		</view>
		<view class="FundRecordBox">
			<view class="detailedList" v-if="detailedList.length>0">
				<view class="detailedItem" v-for="(item,index) in 10">
					<view class="detailed_L">
						<view class="detailedName">充值</view>
						<view class="times">2021-01-01 15:09</view>
					</view>
					<view class="detailed_R">
						<view class="priceNum">+2.9</view>
						<view class="number">5.87</view>
					</view>
				</view>
			</view>
			<view class="emptyBox" v-else>
				<u-empty text="空空如也哦~" mode="history" icon-size="200"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navItem:[{name:"收入"},{name:"支出"}],
				current:0,
				detailedList:[{}]
			}
		},
		methods: {
			selectItem(index){
				this.current = index
			}
		}
	}
</script>

<style scoped lang="less">
.FundRecord{
	background-color: #F3F3F3;
	height: 100vh;
	overflow: auto;
	padding-top: 100upx;
	.NavigationBox{
		position: fixed;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750upx;
		height: 100upx;
		background: #FFFFFF;
		opacity: 1;
		padding: 24upx 207upx;
		z-index: 999;
		.NavigationItem{
			padding: 8upx 0;
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		.currentColor{
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			border-bottom: 5upx solid #FF801D;
		}
	}
	.FundRecordBox{
		padding: 16upx 24upx;
		.detailedList{
			padding: 0 24upx;
			background-color: #fff;
			border-radius: 8upx;
			.detailedItem{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32upx 0;
				border-bottom: 2upx solid #F5F5F5;
				.detailed_L{
					.detailedName{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
					.times{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #D0D0D0;
						margin-top: 24upx;
					}
				}
				.detailed_R{
					display: flex;
					flex-direction: column;
					align-items: center;
					.priceNum{
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
						// margin-right: 4upx;
					}
					.number{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #D0D0D0;
						margin-top: 24upx;
					}
				}
			}
		}
		.emptyBox{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 750upx;
			height: 600upx;
		}
	}
}
</style>
